<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="范珍">
    <title></title>
    <script src='vue.js'></script>
</head>

<body>
    <div id='app'>
        <!--
            如果把切换出去的组件保留在内存中,
            可以保留他的状态以避免重新渲染
        -->
        <keep-alive>
            <!--
                动态组件: 通过is属性指明要显示组件的名称
            -->
            <component :is="currentView"></component>
        </keep-alive>
        <button @click="changeCom">切换组件</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                currentView: "home",
            },
            components: {
                "home": {
                    template: ` <div>home 组件</div>`,
                },
                "contact": {
                    template: ` <div>contact组件</div>`,
                },
                "set": {
                    template: ` <div>set 组件</div>`,
                },
            },
            methods: {
                changeCom: function () {
                    this.currentView = 'set'
                }
            }
        })
    </script>


</body>
<html>